<!-- 电力一张图 -->

<script setup lang="ts">
import { CloseBold } from '@element-plus/icons-vue'
import moment from 'moment'

/** echarts start */
const echartRef = ref(null) as any

const chartOption = reactive({
  title: {
    text: '',
    textStyle: {
      fontWeight: 'normal',
    },
    left: 'center',
    // top: 'center',
  },
  legend: {
    left: 'left',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
    formatter: function (params: any) {
      const data = params[0].data.value
      const time = new Date(data[0]).toLocaleString()
      const value = data[1]
      return `时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间：${time}<br/>有功功率：${value}kW`
    },
  },
  xAxis: {
    type: 'time',
    splitLine: {
      show: false,
    },
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%'],
    splitLine: {
      show: false,
    },
  },
  series: [
    {
      name: '',
      type: 'line',
      showSymbol: false,
      itemStyle: {
        normal: {
          color: '#3AB779',
          lineStyle: {
            color: '#3AB779',
          },
        },
      },
      data: [],
    },
  ],
})

onMounted(() => {
  chartOption.graphic = [
    {
      type: 'text',
      left: 'center',
      top: 'middle',
      style: {
        fill: '#999',
        text: '加载中...',
        font: '14px Microsoft YaHei',
      },
    },
  ]
  echartRef.value.initEchat(chartOption)
})

function loadEchat(dwItem: any) {
  const params = {
    xzcs: '1', //选择参数
    szlx: '1', //数值类型
    jgsj: '2', //间隔时间
    startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
    endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
    mbId: dwItem.mbId,
    nylx: 2,
    mblx: dwItem.mblx, //目标类型
    ymlx: 2, //查询页面类型
  }

  queryJcdwTbInfo(params).then((res: any) => {
    chartOption.title.text = ''
    chartOption.series[0].name = ''
    chartOption.series[0].data = []

    const data = res.dwHistoryResp.sjList.map((item: any, index: any) => {
      return { value: [item, res.dwHistoryResp.dwHistoryInfoList[0].ylz[index]] }
    })

    chartOption.title.text =
      res.dwHistoryResp.dwHistoryInfoList[0].ylx +
      '/' +
      res.dwHistoryResp.dwHistoryInfoList[0].ylxDw
    chartOption.series[0].name = `${res.mbmc}——${res.dwHistoryResp.dwHistoryInfoList[0].ylx}`
    chartOption.series[0].data = data

    if (data.length < 1) {
      chartOption.graphic = [
        {
          type: 'text',
          left: 'center',
          top: 'middle',
          style: {
            fill: '#999',
            text: '暂无数据',
            font: '14px Microsoft YaHei',
          },
        },
      ]
    } else {
      chartOption.graphic = null
    }

    echartRef.value.initEchat(chartOption)
  }).catch((err) => {
    chartOption.graphic = [
      {
        type: 'text',
        left: 'center',
        top: 'middle',
        style: {
          fill: '#999',
          text: '加载失败',
          font: '14px Microsoft YaHei',
        },
      },
    ]
    echartRef.value.initEchat(chartOption)
  })
}

const chartShow = ref(true)

const defaultEcharts = (dwItem: any) => {
  if (dwItem.children.length > 0) {
    loadEchat(dwItem.children[0])
    showData.value = true
  }
}

const nodeClick = (dwItem: any) => {
  if (!dwItem.mblx) {
    return (chartShow.value = false)
  }

  loadEchat(dwItem)
  chartShow.value = true
}

const pdg6 = ref()
const effect = ref(2)
//样式效果切换
const effectClick = () => {
  if (effect.value < 2) {
    effect.value++
  } else {
    effect.value = 0
  }
  showData.value = false
  pdg6.value.loadData()
}

const showData = ref(false)
</script>

<template>
  <!-- top title -->
  <div class="relative h-60px lh-60px font-bold bg-[#f8f8f8]">
    <h1 class="m-0 text-center text-36px text-[#333]">徐圩新区石化基地电力一张图</h1>
    <el-button type="primary" class="absolute top-15px right-20px w-80px ml-50px rounded-15px z-10" @click="effectClick"
      :disabled="!showData">切换效果</el-button>
  </div>

  <div class="flex flex-col" style="height: calc(100% - 100px)">
    <div class="flex-1">
      <PDG6 ref="pdg6" @node-click="nodeClick" @defaultEcharts="defaultEcharts" :effect="effect"></PDG6>
    </div>

    <div class="relative h-410px m-10px mt-10px" style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)">
      <el-button v-if="chartShow" type="primary" class="absolute right-20px top-10px w-80px ml-50px rounded-15px z-10"
        :icon="CloseBold" @click="chartShow = false">关闭</el-button>

      <!-- 折线图 -->
      <Echarts v-if="chartShow" ref="echartRef" />
    </div>
  </div>
</template>

<style>
</style>
